<html>
  <head>
    <link
      rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css"
    />

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

    <!-- Three.js -->
    <script src="./libs/js/three.min.js"></script>
    <script src="./libs/js/dxf-parser.js"></script>

    <script src="../dist/three-dxf.js"></script>
  </head>
  <body>
    <style>
      #cad-view {
        display: inline-block;
        margin: 10px 0;
        /*			border: 1px solid #666;*/
      }
      #cad-view > canvas {
        border: 1px solid #666;
      }

      .progress {
        opacity: 0;
        -webkit-transition: opacity 1s linear;
        -moz-transition: opacity 1s linear;
        -ms-transition: opacity 1s linear;
        -o-transition: opacity 1s linear;
        transition: opacity 1s linear;
      }

      .progress.loading {
        opacity: 1;
      }
    </style>

    <div class="container">
      <div role="form">
        <div class="form-group">
          <label for="exampleInputFile">Choose a DXF file</label>
          <input type="file" accept=".dxf" id="dxf" name="file" />
          <div class="progress progress-striped" style="width: 300px">
            <div
              id="file-progress-bar"
              class="progress-bar progress-bar-success"
              role="progressbar"
              style="width: 0"
            ></div>
          </div>
          <div id="file-description" class="help-block"></div>
        </div>

        <p>
          While hovering over the canvas: Right click to pan. Mouse wheel to
          zoom in an out.
        </p>
      </div>
      <div id="cad-view"></div>
      <div id="dxf-content-container">
        <pre id="dxf-content"></pre>
      </div>
    </div>

    <script src="index.js"></script>
  </body>
</html>
